<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>评论信息管理</title>
    <script src="http://10.222.29.156:3456/js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="http://10.222.29.156:3456/css/bootstrap.css">
    <link rel="stylesheet" href="http://10.222.29.156:3456/css/bootstrap-theme.css">
    <script src="http://10.222.29.156:3456/js/bootstrap.js"></script>
</head>

<body style="font-size: 16px; background-image: url(http://10.222.29.156:3456/images/home10.jpg);">
    <div>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid" style="margin-left: 20%; margin-right: 20%;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
                    <a class="navbar-brand" href="${contextPath }/sec/home">M 系统</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="${contextPath }/sec/home">首页</a></li>
                        <li><a href="${contextPath }/sec/food">菜品管理</a></li>
                        <li><a href="${contextPath }/sec/order">订单信息</a></li>
                    <li><a href="${contextPath }/sec/advertisement">广告信息</a></li>
                    <li class="active"><a href="${contextPath }/sec/commentary">评论信息</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown"><span id="username"><img id="userPortrait" width="30px" height="30px" class="img-circle"></img></span><span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu"
                            aria-labelledby="dropdownMenu">
                            <li class="divider"></li>
                            <li><a href="${contextPath }/sec/merchant">详情</a></li>
                            <li><a href="${contextPath }/sec/exit.action">
                            退出</a></li>
                        </ul></li>
                </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
    <br>
    <br>
    <br>
    <div class="container">
        <div class="well center-block">
            <div class="panel panel-success" style="background-image: url(http://10.222.29.156:3456/images/geometry2.png);">
                <div class="panel-heading" align="center">
                    <h4>所有评论</h4>
                </div>
                <div class="panel-body" style=" height:650px; overflow:auto" id="commentaryList">
                    
                </div>
            </div>
        </div>
    </div>
    
     <div class="modal fade" id="replyModel" tabindex="-1" role="dialog" aria-labelledby="updateModelLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                
                        <div class="modal-body">   
                            <form class="form-horizontal " action="${contextPath }/login.action" method="post">
                                <div class="form-group " >
                                    <label class="col-md-2 control-label">回&nbsp; &nbsp;复 </label>
                                    <div class="col-md-9">
                                        <textarea type="text" class="form-control" id="address" name="address"  placeholder="商家回复内容" autocomplete="off" rows="3"
                                        ></textarea>
                                    </div> 
                                </div>
                            </form>
                        </div>

                        <div class="modal-footer">
                            <div class="col-md-offset-4 col-md-1 ">
                                <button type="submit" class="btn btn-default" id="replyCommentary">回复</button>
                            </div>
                            <div class="col-md-offset-1 col-md-1">
                                <button class="btn btn-default" data-dismiss="modal">返回</button>
                            </div>
                        </div>

            </div>
        </div>
    </div>
    <script>
        $(function(){
            $.ajax({
                url: "/o2o-merchant/sec/rest/merchant",
                type: "get"
            }).done(function (msg) {
                $("#userPortrait").attr("src",msg.portrait);
            });
            var op = commentariesList();
            op.createCommentaryList();

            function commentariesList(){
            	var rs={};
            	rs.createCommentaryList=function(){
            		var commentaryTr='<div class="col-md-10 col-md-offset-1" style="border-top:1px solid #000;border-bottom:1px solid #000"><div id="customerName" class="col-md-2"></div><div id="grade" class="col-md-2"></div><div class="col-md-12" style="max-width: 1000px;word-break: break-all;word-wrap: break-word;"><label>用户评论：</label><div class="col-md-11 col-md-offset-2" id="customerCommentary"></div></div><div class="col-md-3 col-md-offset-9" id="customerDate"> </div><div class="col-md-1 col-md-offset-10"><a type="button" class="btn btn-success btn-sm" data-target="#replyModel" data-toggle="modal">回复</a></div><div class="col-md-12" style="max-width: 1000px;word-break: break-all;word-wrap: break-word;"><div class="col-md-1"><img id="merchantPortrait" width="40px" height="40px" class="img-thumbnail"></img></div><div style="float:left;"class="col-md-10 col-md-offset-2" id="merchantCommentary"></div></div><div class="col-md-3 col-md-offset-9" id="merchantDate"></div>'
            		$.ajax({
                        url: "/o2o-merchant/sec/rest/commentary",
                        type: "get",
                    }).done(function (msg) {
                        rs.sortByDate(msg);
                        msg.forEach((item,index)=>{
                            let commentary1=$(commentaryTr);
                            let commentaryId=item.id;
                            if(item.customer!=null){
                                commentary1.find("#customerName").text(item.customer.username+"评级");
                            }
                            commentary1.find("#grade").text(item.grade+"颗星");
                            commentary1.find("#customerCommentary").text(item.customerCommentary);
                            commentary1.find("#customerDate").text("       "+item.customerCommentaryDate);
                            let btn =commentary1.find("a");
                            if(item.merchantCommentary==""||item.merchantCommentary==null){
                                btn.show();
                                commentary1.find("#merchantPortrait").hide();
                            	btn.on("click",function(){
	                            	$("#replyCommentary").on("click",function(){
                                        if($("textarea").val()!=""||$("textarea").val()!=null){
                                            rs.replyCommentary(commentaryId,$("textarea").val());
                                        }
	                            	})
	                            })
                            }else{
                            	btn.hide();
                                commentary1.find("#merchantPortrait").show();
                                commentary1.find("#merchantPortrait").attr("src",item.merchant.portrait);
                                commentary1.find("#merchantCommentary").text(item.merchantCommentary);
                                commentary1.find("#merchantDate").text("       "+item.merchantCommentaryDate);
                            }
                            $("#commentaryList").append(commentary1);
                        })
                    });
            	}

            	rs.replyCommentary=function(commentaryId,merchantCommentary){
                     $.ajax({
                         url: "/o2o-merchant/sec/rest/commentary/"+commentaryId+"/"+merchantCommentary,
                        type: "get"
                    }).done(function(){
                        $("#orderInfoDetailModel").hide();
                        window.location.href = '/o2o-merchant/sec/commentary';
                    })
            	}
                rs.sortByDate=function(data){
                    function compare(propertyName) { 
                        return function (object1, object2) { 
                            var value1 = object1[propertyName]; 
                            var value2 = object2[propertyName]; 
                            if (value2 < value1) { 
                                return -1; 
                            } 
                            else if (value2 > value1) { 
                                return 1; 
                            } 
                            else { 
                                return 0; 
                            } 
                        } 
                    }

                    data.sort(compare("customerCommentaryDate"));  
                }
            	return rs;
            }
        })
    </script>

</body>

</html>